<template>
	<view class="">
		<view class="contain">
			<view class="info">
				<view class="">
					<text class="txt">提交人:</text>{{info.userName}}
				</view>
				<view class="">
					<text class="txt">孩子班级:</text>{{info.className}}
				</view>
				<view class="">
					<text class="txt">联系电话:</text>{{info.userPhone}}
				</view>
				<view class="">
					<text class="txt">时间:</text>{{info.createTime}}
				</view>
			</view>
			<view class="bottom">
				<view class="title">
					{{info.title||'尊敬的园长:'}}
				</view>
				<view class="content">
					{{info.content}}
				</view>
			</view>
			<view v-if="info.child&&info.child.length" class="bottom bottomRadius"
				style="background-color: #f1f1f1;overflow: hidden;">
				<view class="title">
					园长回复:
				</view>
				<view class="content">
					{{info.child[0].content}}
				</view>
			</view>
		</view>
		<button class="btn" v-if="showReply" @click="reply">回复</button>
		<view class="foot" v-if="showInput">
			<chat-input @send-message="sendMsg" @blur="blurInput" :focus="showInput"
				:placeholder="placeholder"></chat-input>
			<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
		</view>
	</view>
</template>

<script>
	import chatInput from '../../../components/im-chat/chatinput.vue'; //input框
	import {
		save,
		opinionThininfo
	} from '@/api/opinionThin.js';
	import {
		getOne,
		pageStaff
	} from '@/api/workers.js';
	export default {
		data() {
			return {
				info: {

				},
				showInput: false,
				showReply: false,
				placeholder: '',
				roleList:[]
			}
		},
		onLoad(op) {
			console.log('opsssss', op)
			this.id = JSON.parse(op.info).id
			
			// 受理人角色获取
			this.getOne({
				roleCode: 'leader'
			})
			
		},
		methods: {
			// 获取受理人
			async getOne(pa) {
				const {
					data
				} = await getOne(pa)
				console.log('打印返回', data)
				this.getPageStaff({
					roleId: data.data.roleId
				})
			},
			async getPageStaff(pa) {
				const {
					data
				} = await pageStaff(pa)
				if (data.code == 0) {
					this.getInfo(this.id);
					if(data.data.list.length){
						this.roleList=data.data.list;
						
					}
					


				}
			},
			async getInfo(id) {
				const {
					data
				} = await opinionThininfo(id)
				if (data.code == 0) {
					this.info = data.data
					console.log('this.roleList',this.roleList)
					this.showReply = this.roleList.some(item => {
						return item.userId == this.$util.getUser().userId
					})
					if(this.showReply){
						if(this.info.child.length){
							this.showReply=false
						}
					}
					
				} else {
					this.$api.showTip('稍微重试')
				}
				console.log('返回', data)
			},
			reply() {
				this.placeholder = `回复${this.info.userName}:`
				this.showInput = true
			},
			async sendMsg(con) {
				if (!con.content.length) {
					return this.$api.showTip('请输入内容')
				}
				const {
					data
				} = await save({
					parentId: this.info.id,
					content: con.content
				})
				if (data.code == 0) {
					this.$api.showTip('回复成功', () => {
						this.getInfo(this.id)
						this.closeInputModel();
					})
				}
				console.log('返回', data)
			},
			//失去焦点触发
			blurInput() {
				this.closeInputModel();
			},
			//关闭键盘 关闭输入框
			closeInputModel() {
				this.showInput = false;
				this.content = '';
				uni.hideKeyboard();
			},
		},
		components: {
			chatInput
		},
	}
</script>

<style lang="scss">
	.contain {
		margin: 20rpx 30rpx;
		background-color: #fff;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;

		.info {
			padding: 30rpx;
			border-bottom: 1rpx solid #dadbde;

			view {
				margin-bottom: 10rpx;
			}
		}

		.bottom {
			padding: 30rpx;

			.title {
				font-weight: 700;
				margin-bottom: 20rpx;
			}

		}

		.bottomRadius {
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
		}

		.txt {
			color: #777;
		}
	}

	.foot {
		position: fixed;
		width: 100%;
		height: 140rpx;
		min-height: 140rpx;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
		z-index: 999999;
		margin-bottom: 50px;
	}
</style>